<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="500px">
			<el-form ref="formRef" :model="state.ruleForm" label-width="auto" disabled>
				<el-form-item label="下单时间">
					<el-input type="text" v-model="state.ruleForm.create_time" />
				</el-form-item>
				<el-form-item v-if="state.ruleForm.cancel_time" label="取消时间">
					<el-input type="text" v-model="state.ruleForm.cancel_time" />
				</el-form-item>
				<el-form-item v-if="state.ruleForm.pay_time" label="支付时间">
					<el-input type="text" v-model="state.ruleForm.pay_time" />
				</el-form-item>
				<el-form-item v-if="state.ruleForm.delivery_time" label="发货时间">
					<el-input type="text" v-model="state.ruleForm.delivery_time" />
				</el-form-item>
				<el-form-item v-if="state.ruleForm.receive_time" label="确认收货时间">
					<el-input type="text" v-model="state.ruleForm.receive_time" />
				</el-form-item>
				<el-form-item v-if="state.ruleForm.confirm_delivery_time" label="最晚确认收货时间">
					<el-input type="text" v-model="state.ruleForm.confirm_delivery_time" />
				</el-form-item>
				<el-form-item v-if="state.ruleForm.complete_time" label="结算时间">
					<el-input type="text" v-model="state.ruleForm.complete_time" />
				</el-form-item>
				<el-form-item v-if="state.ruleForm.settle_accounts_time" label="最晚结算时间">
					<el-input type="text" v-model="state.ruleForm.settle_accounts_time" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="onCancel" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="state.dialog.submitLoading" size="default">提 交</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { timeDictionary } from '/@/utils/dictionary';

let callback: Function = () => {};
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	ruleForm: {
		create_time: '',
		cancel_time: '',
		pay_time: '',
		delivery_time: '',
		receive_time: '',
		confirm_delivery_time: '',
		complete_time: '',
		settle_accounts_time: '',
	},
});

/********** 触发事件 **********/
// 取消
const onCancel = () => {
	state.dialog = {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	};
};
// 提交
const onSubmit = () => {
	onCancel();
	callback();
};

/********** 方法事件 **********/
// 打开
const openDialog = (row: any) => {
	state.dialog.isShowDialog = true;
	state.dialog.title = `「${row.pay_state === 1 ? row.orders.order_detail_no : row.order_no}」时间轴`;
	state.ruleForm = {
		create_time: row.orders.create_time ? timeDictionary(row.orders.create_time) : '',
		cancel_time: row.orders.cancel_time ? timeDictionary(row.orders.cancel_time) : '',
		pay_time: row.orders.pay_time ? timeDictionary(row.orders.pay_time) : '',
		delivery_time: row.orders.delivery_time ? timeDictionary(row.orders.delivery_time) : '',
		receive_time: row.orders.receive_time ? timeDictionary(row.orders.receive_time) : '',
		confirm_delivery_time: row.orders.confirm_delivery_time ? timeDictionary(row.orders.confirm_delivery_time) : '',
		complete_time: row.orders.complete_time ? timeDictionary(row.orders.complete_time) : '',
		settle_accounts_time: row.orders.settle_accounts_time ? timeDictionary(row.orders.settle_accounts_time) : '',
	};
};

/********** 网络请求 **********/

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
